<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { getAllCostumes } from "@/api/store";
import { Plus } from "@element-plus/icons-vue";
import { formatDateTime } from "@/utils/tools";

interface Costume {
  id: string;
  name: string;
  description: string;
  categoryId: string;
  url: string | null;
  createdTime: string;
  updatedTime: string;
  createdBy: string;
  updatedBy: string | null;
  status: number;
  price: number;
  stock: number;
  sonUrl: string | null;
  isLike: boolean | null;
}

interface PageData {
  pageNo: number;
  pageSize: number;
  result: Costume[];
  total: number;
  totalPages: number;
  start: number;
  end: number;
}

const route = useRoute();
const loading = ref(false);
const storeId = ref(route.query.storeId as string);
const storeName = ref(route.query.storeName as string);

const pageData = reactive<PageData>({
  pageNo: 1,
  pageSize: 10,
  result: [],
  total: 0,
  totalPages: 0,
  start: 0,
  end: 0
});

const getCostumeList = async () => {
  try {
    loading.value = true;
    const { data } = await getAllCostumes(storeId.value, {
      pageNo: pageData.pageNo,
      pageSize: pageData.pageSize
    });

    Object.assign(pageData, data);
  } catch (error) {
    console.error("获取服饰列表失败:", error);
    ElMessage.error("获取服饰列表失败");
  } finally {
    loading.value = false;
  }
};

const handleSizeChange = (val: number) => {
  pageData.pageSize = val;
  pageData.pageNo = 1;
  getCostumeList();
};

const handleCurrentChange = (val: number) => {
  pageData.pageNo = val;
  getCostumeList();
};

const statusMap = {
  0: { label: "下架", type: "info" },
  1: { label: "上架", type: "success" }
};

onMounted(() => {
  if (!storeId.value) {
    ElMessage.error("缺少门店ID参数");
    return;
  }
  getCostumeList();
});
</script>

<template>
  <div class="costume-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ storeName }} - 服饰管理</span>
          <el-button type="primary" @click="$router.go(-1)"
            >返回门店列表</el-button
          >
        </div>
      </template>

      <div class="toolbar">
        <el-button type="primary">
          <el-icon><Plus /></el-icon>
          新增服饰
        </el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="pageData.result"
        border
        style="width: 100%"
      >
        <el-table-column prop="name" label="服饰名称" min-width="150" />
        <el-table-column
          prop="description"
          label="描述"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column prop="price" label="价格" width="100">
          <template #default="{ row }"> ¥{{ row.price }} </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="statusMap[row.status]?.type">
              {{ statusMap[row.status]?.label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="createdBy" label="创建人" width="120" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link>编辑</el-button>
            <el-button :type="row.status === 0 ? 'success' : 'warning'" link>
              {{ row.status === 0 ? "上架" : "下架" }}
            </el-button>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pageData.pageNo"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pageData.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.costume-container {
  padding: 20px;

  .box-card {
    width: 100%;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .toolbar {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
